<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .w-e-menu {
            z-index: 2 !important;
        }
        .w-e-text-container {
            z-index: 1 !important;
        }
        #parent {
            border: #dcdfe6 solid 1px;
            background-color: #FFFFFF;
            width: 100px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
        }

        #parent select {
            background: transparent;
            border: none;
            padding-left: 10px;
            width: 120px;
            height: 100%;
        }
    </style>

</head>
<body>
<div id="app" class="demo-input-size">

    <el-form id="newsAdd" ref="newsInfo" :model="newsInfo" label-width="180px" >

        <el-form-item label="id" prop="id" style="width: 600px;display: none">
            <el-input v-model="newsInfo.id" name="id"></el-input>
        </el-form-item>

        <el-form-item label="发布者" prop="nuser" style="width: 600px;">
            <el-input v-model="newsInfo.nuser" name="nuser"></el-input>
        </el-form-item>

        <el-form-item label="新闻标题" prop="title" style="width: 600px;">
            <el-input v-model="newsInfo.title" name="title"></el-input>
        </el-form-item>

        <el-form-item label="新闻内容" prop="details"  style="width: 1000px;">
            <div id="div1">
                <p  v-html="newsInfo.details"></p>
            </div>
            <textarea id="text1" v-model="newsInfo.details" style="width:100%; height:200px;display: none" name="details"></textarea>
        </el-form-item>

        <el-form-item label="栏目名称" prop="ncolumn">
            <div id="parent">
                <select
                        v-model="ncolumn.id"
                        placeholder="请选择新闻栏目"
                        name="ncolumn">
                    <option
                            v-for="(c,i) in  columnArr"
                            :label="c.cname"
                            :value="c.id">
                    </option>
                </select>
            </div>
        </el-form-item>

        <el-form-item label="发布时间" prop="publicDate">
            <el-date-picker
                    name="publicDate"
                    v-model="newsInfo.publicDate"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :editable="false"
                    type="datedatetime"
                    placeholder="选择修改发布日期"
                    :picker-options="pickerOptions0">
            </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-popover
                    placement="top"
                    width="160"
                    v-model="visible">
                <p>确定要修改么</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" :disabled="isDisabled" @click="updateNews()">确定</el-button>
                </div>
                <el-button type="primary" slot="reference">修改</el-button>
            </el-popover>
        </el-form-item>
    </el-form>

</div>
<script>

    $.get("/demo/column/newsListNewsColumn", function (backData) {
        haha.columnArr = backData.data;
    });

    $.get("/demo/condition/newsConditionList", function (backData) {
        haha.conditionArr = backData.data;
    });

    var id = window.location.href.split("=")[1];
    $.get("/demo/news/updateQueryNews/" + id, function (backData) {
        haha.newsInfo = backData.data;
        haha.ncolumn = backData.data.newsColumn;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            isDisabled: false,
            visible: false,
            columnArr:[],
            newsArr:[],
            conditionArr:[],
            newsInfo:{},
            ncolumn:""
        },
        methods:{
            updateNews() {
                this.isDisabled = true;
                haha.$refs["newsInfo"].validate((valid) => {
                    if (valid) {
                        var  newData = new FormData(newsAdd);
                        // 将数据发送给服务器后台
                        $.ajax({
                            url:"/demo/news/updateNews",
                            type:"POST",
                            data:newData,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                haha.$message.success('修改成功');
                                this.isDisabled = false;
                            }

                        });
                    }
                });
            },
        }
    });




</script>

<script src="../js/wangEditor.min.js"></script>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#div1');
    const $text1 = $('#text1');
    editor.config.placeholder = '新闻内容';
    editor.config.height = 350;
    editor.config.uploadImgServer ='/ssm/upload/file';
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    editor.config.uploadImgMaxLength = 5;// 一次最多上传 5 个图片
    editor.config.uploadImgParams = {dir: 'bbs', x: 100};
    editor.config.uploadFileName = 'file';
    editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            console.log(xhr);

            // 可阻止图片上传
            return true;
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn,result) {
            console.log("地址是"+result);
            // result 即服务端返回的接口
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.url);
        }
    };

    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text1.val(html)
    };
    editor.create();

    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>

</body>
</html>